<template>
  <div class="brand">
    <div class="brand-header">
      <div class="brand-title">
        <van-icon name="arrow-left" @click="goHome" />
        <div>品牌特卖</div>
      </div>
    </div>
    <div class="brand-tab">
      <van-tabs
        @click="onClick"
        sticky
        background="url('https://img.alicdn.com/imgextra/i3/2053469401/O1CN01gUmTUy2JJhz5ao7SS_!!2053469401.png') "
        title-inactive-color="rgba(255,255,255,.6)"
        title-active-color="#fff"
      >
        <van-tab
          v-for="item in brandNav"
          :title="item.title"
          :key="item.id"
          :name="item.typeId"
        >
          <Public v-if="item.id === 0" />
          <BrandListCopy v-else />
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted } from "vue";
import Public from "@/components/BrandList/Public.vue";
import BrandListCopy from "@/components/BrandList/BrandListCopy.vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
export default defineComponent({
  setup() {
    const store = useStore();

    const router = useRouter();

    const brandNav = computed(() => {
      return store.state.brand.brandNav;
    });
    const getBrandNav = () => {
      return store.dispatch({
        type: "brand/getBrandNav",
      });
    };
    const getBrandOneData = () => {
      return store.dispatch({
        type: "brand/getBrandOneData",
      });
    };

    const goHome = () => {
      router.push("/home");
    };
    const getBrandTwoData = () => {
      return store.dispatch({
        type: "brand/getBrandTwoData",
      });
    };
    const getBrandList = (typeId: number) => {
      return store.dispatch({
        type: "brand/getBrandList",
        typeId,
      });
    };
    const onClick = (typeId: number) => {
      getBrandList(typeId);
    };
    onMounted(() => {
      getBrandNav();
      getBrandTwoData();
      getBrandOneData();
    });

    return {
      brandNav,
      onClick,
      goHome,
    };
  },
  components: {
    Public,
    BrandListCopy,
  },
});
</script>

<style lang="stylus" scoped>
/deep/.van-sticky--fixed
    top .45rem !important
/deep/.van-tabs__line
    background #fff
.brand-header
    z-index 100
    position fixed
    top 0
    height .35rem
    padding .05rem .1rem
    background url("https://img.alicdn.com/imgextra/i3/2053469401/O1CN01gUmTUy2JJhz5ao7SS_!!2053469401.png")
    width 100%
    background-size cover
    .brand-title
        display flex
        font-size .18rem
        color #fff
        align-items center
        line-height .35rem
        div
            margin-left 1.2rem
.brand-tab
    margin-top .4rem
    background #F5F5F5 url("https://img.alicdn.com/imgextra/i3/2053469401/O1CN01p3C4Lj2JJhz3YaJEa_!!2053469401.png") no-repeat
    background-size 100%
</style>
